<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>danmu.js</title>
    <style>
      html {
       width: 100%;
       height: 100%;
      }
      body {
       width: 100%;
       height: 100%;
      }
      #wrap {
        position: absolute;
        left: 0;
        width: 600px;
        height: 337px;
      }
      #vs {
        position: absolute;
        left: 0;
        width: 100%;
        height: 50%;
        z-index: 9999;
        background: red;
      }
      #btnwrap {
        position: absolute;
        left: 0;
        bottom: 20%;
      }
    </style>
</head>
<body>
    <div id="wrap">
      <div id="vs"></div>
    </div>
    <div id="btnwrap">
      <div>
        <button onclick="start()">弹幕开始</button>
      </div>
      <div>
        <input type="text" id="comment" placeholder="输入弹幕内容"/>
        <button onclick="sendComment()">发送弹幕</button>
      </div>
    </div>
    <script src="../browser/index.js" charset="utf-8"></script>
    <script type="text/javascript">
        // let el = createDom('xg-el', '弹幕弹幕弹幕<img src="./grinning-face.png" />弹幕弹幕', {}, 'xgplayer-el')
        let wrap = document.getElementById('wrap')
        let direction = 'r2l'
        let danmu = new window.DanmuJs({
          container: document.getElementById('vs'),
          containerStyle: {
            zIndex: 100
          },
          live: true,
          bOffset: 0,
          // player,
          direction,
          // comments: [],
          area: {
            start: 0,
            end: 0.2
          }
        })
        let id = 1
        function start () {
          danmu.start()



          // setInterval(function() {
          //     id++
          //     danmu.sendComment({  //发送弹幕
          //         // duration: 6000,
          //         moveV: 50,
          //         id: id+'',
          //         txt: id+'11111', //弹幕文字内容
          //         noDiscard: true,
          //     })
          // }, 2000)

          setTimeout(function() {
            danmu.sendComment({
                moveV: 50,
                id: '999',
                txt: '1234567',
                // loop: true,
                noDiscard: true,
            })
          }, 2000)
        }
        // danmu.sendComment({
        //     moveV: 100,
        //     id: '1',
        //     txt: '11111',
        // })
        // setTimeout(function() {
        //     danmu.sendComment({
        //         moveV: 100,
        //         id: '2',
        //         txt: '2222',
        //     })
        // }, 200)
        function sendComment() {
          id++;
          let comment = document.getElementById('comment').value
          danmu.sendComment({
            duration: 5000,
            moveV: 50,
            id: id + '',
            prior: true,
            txt: comment,
            noDiscard: true,
            // style: {
            //   color: '#ff9500',
            //   fontSize: '20px',
            //   border: 'solid 1px #ff9500',
            //   borderRadius: '50px',
            //   padding: '5px 11px',
            //   backgroundColor: 'rgba(255, 255, 255, 0.1)'
            // },
            // mode: document.getElementById('hidetype').value
          })
        }
    </script>
</body>
</html>
